<script lang="ts" setup>
import { ref } from "vue";
import { goBack,getRouteParams } from "../../tools/go"
import {getUserId} from "../../store"
import {getAnnouncement_1} from "../../api/announcement"

const handleBack = () => {
  goBack()
};

const announcement = ref({})


const init = () => {

  getAnnouncement_1(getUserId(), getRouteParams("id")).then(res => {
    announcement.value = res.data
  })

}

init()
</script>



<template>
  <view class="page-container">
    <!-- 顶部导航栏 -->
    <view class="nav-bar">
      <view class="nav-left cursor-pointer"  @click="handleBack">
        <uni-icons type="back" size="24" color="#333333" />
      </view>
      <view class="nav-title">公告详情</view>
      <view class="nav-right"></view>
    </view>

    <!-- 内容区域 -->
    <scroll-view class="content-scroll" scroll-y>
      <view class="notice-container">
        <!-- 公告标题 -->
        <view class="notice-header">
          <text class="notice-title">{{announcement.title}}</text>
          <view class="notice-info">
            <text class="info-item">发布时间：{{ announcement.publicTime }}</text>
            <text class="info-item">联系电话：{{announcement.contect}}</text>
          </view>
        </view>

        <!-- 公告内容 -->
        <view class="notice-content">{{announcement.content}}</view>
      </view>
    </scroll-view>
    <view ></view>

  </view>
</template>



<style scoped lang="scss">
page {
  height: 100%;
}

.page-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: #f5f5f5;
}

.nav-bar {
  display: flex;
  align-items: center;
  height: 88rpx;
  background-color: #ffffff;
  padding: 0 30rpx;
  flex-shrink: 0;
}

.nav-left {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
}

.nav-title {
  flex: 1;
  text-align: center;
  font-size: 16px;
  font-weight: 500;
  color: #333333;
}

.nav-right {
  width: 48px;
}

.content-scroll {
  flex: 1;
  overflow: auto;
}

.notice-container {
  height: 94.2vh;
  background-color: #ffffff;
  padding: 40rpx 30rpx;
}

.notice-header {
  margin-bottom: 40rpx;
}

.notice-title {
  font-size: 20px;
  font-weight: bold;
  color: #333333;
  line-height: 1.4;
  margin-bottom: 20rpx;
  display: block;
}

.notice-info {
  display: flex;
  align-items: center;
}

.info-item {
  font-size: 14px;
  color: #999999;
  margin-right: 30rpx;
}

.notice-content {
  color: #333333;
}

.content-paragraph {
  margin-bottom: 30rpx;
}

.paragraph-text {
  font-size: 16px;
  line-height: 1.6;
  color: #333333;
}

.bold {
  font-weight: bold;
}

.content-image {
  margin: 30rpx 0;
}

.content-img {
  width: 100%;
  border-radius: 12rpx;
}

.interaction-bar {
  display: flex;
  align-items: center;
  height: 100rpx;
  background-color: #ffffff;
  padding: 0 60rpx;
  box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.05);
  flex-shrink: 0;
}

.interaction-item {
  display: flex;
  align-items: center;
  margin-right: 60rpx;
}

.interaction-text {
  font-size: 14px;
  color: #666666;
  margin-left: 8rpx;
}

.liked {
  color: #ff6b6b;
}

.cursor-pointer {
  cursor: pointer;
}
</style>
